<template>
  <div>
    <!-- 顶部 -->
    <el-row type="flex" justify="space-between">
      <span style="color: pink; font-size: 10px"
        >说明: 目前支持学科和关键字条件筛选</span
      >
      <el-button
        type="success"
        size="small"
        icon="el-icon-edit"
        @click="$router.push('/questions/new')"
        >新增试题</el-button
      >
    </el-row>
    <!-- 筛选区域 -->
    <el-form label-width="80px" style="margin-top: 10px" :model="formData">
      <el-row type="flex" justify="space-between">
        <el-col>
          <el-form-item label="学科">
            <el-select
              style="width: 100%"
              size="small"
              v-model="formData.subjectID"
              @focus="getSubjects"
              @change="formData.catalogID = ''"
            >
              <el-option
                v-for="{ label, value } in subjectList"
                :key="value"
                :value="value"
                :label="label"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="二级目录">
            <el-select
              style="width: 100%"
              size="small"
              v-model="formData.catalogID"
              @focus="getDirectorys"
              :no-data-text="formData.subjectID ? '暂无数据' : '请先选择学科'"
            >
              <el-option
                v-for="{ value, label } in directoryList"
                :key="value"
                :value="value"
                :label="label"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="标签">
            <el-select
              style="width: 100%"
              size="small"
              v-model="formData.tags"
              @focus="getTags"
              :no-data-text="formData.subjectID ? '暂无数据' : '请先选择学科'"
            >
              <el-option
                v-for="{ label, value } in tagList"
                :key="value"
                :value="value"
                :label="label"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="关键字">
            <el-input
              size="small"
              v-model="formData.keyword"
              placeholder="根据题干搜索"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col>
          <el-form-item label="试题类型">
            <el-select
              style="width: 100%"
              size="small"
              v-model="formData.questionType"
            >
              <el-option
                v-for="{ label, value } in questionType"
                :key="value"
                :label="label"
                :value="value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="难度">
            <el-select
              style="width: 100%"
              size="small"
              v-model="formData.difficulty"
            >
              <el-option
                v-for="{ label, value } in difficulty"
                :key="value"
                :value="value"
                :label="label"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="方向">
            <el-select
              style="width: 100%"
              size="small"
              v-model="formData.direction"
            >
              <el-option
                v-for="item in direction"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="录入人">
            <el-select
              style="width: 100%"
              size="small"
              v-model="formData.creator"
              @focus="getUserList"
            >
              <el-option
                v-for="item in userList"
                :key="item"
                :value="item"
                :label="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col>
          <el-form-item label="题目备注">
            <el-input
              size="small"
              v-model="formData.remarks"
              placeholder="请输入备注"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="企业简称">
            <el-input
              size="small"
              v-model="formData.shortName"
              placeholder="请输入企业"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="城市">
            <el-select
              size="small"
              style="width: 49%"
              v-model="formData.provinces"
            >
              <el-option
                v-for="item in provinces"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
            <el-select
              size="small"
              style="width: 49%; margin-left: 2%"
              v-model="formData.city"
              :no-data-text="formData.provinces ? '暂无数据' : '请先选择市'"
            >
              <el-option
                v-for="item in citys"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col>
          <el-row type="flex" justify="end">
            <el-button size="small" @click="clear">清除</el-button>
            <el-button size="small" type="primary" @click="search"
              >搜索</el-button
            >
          </el-row>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { questionType, difficulty } from '@/api/hmmm/constants'
import { simple } from '@/api/hmmm/subjects'
import { simple as directorys } from '@/api/hmmm/directorys'
import { simple as getTags } from '@/api/hmmm/tags'
import { simple as simpleUser } from '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys'
export default {
  data () {
    return {
      formData: {
        subjectID: '', // 学科
        catalogID: '', // 目录
        tags: '', // 标签
        questionType: '', // 题型
        difficulty: '', // 难度
        direction: '', // 方向
        creator: '', // 录入人
        provinces: '', // 城市
        city: '', // 地区
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '' // 企业简称
      },
      subjectList: [], // 学科列表
      directoryList: [], // 目录列表
      tagList: [], // 标签列表
      questionType, // 题型枚举
      difficulty, // 难度枚举
      direction: [
        'o2o',
        '外包服务',
        '企业服务',
        '互联网金融',
        '企业咨询',
        '互联网',
        '电子商务',
        '其他'
      ], // 方向
      userList: [], // 用户列表
      provinces: provinces() // 城市
    }
  },
  methods: {
    // 获取学科
    async getSubjects () {
      const { data: res } = await simple()
      this.subjectList = res
    },
    // 获取目录
    async getDirectorys () {
      if (this.formData.subjectID === '') return
      const { data: res } = await directorys({
        subjectID: this.formData.subjectID
      })
      this.directoryList = res
    },
    // 获取标签
    async getTags () {
      if (this.formData.subjectID === '') return
      const { data: res } = await getTags({
        subjectID: this.formData.subjectID
      })
      this.tagList = res
    },
    // 获取用户列表
    async getUserList () {
      const { data: res } = await simpleUser()
      this.userList = res.map((item) => item.username)
    },
    // 清除按钮
    clear () {
      this.formData = {
        subjectID: '', // 学科
        catalogID: '', // 目录
        tags: '', // 标签
        questionType: '', // 题型
        difficulty: '', // 难度
        direction: '', // 方向
        creator: '', // 录入人
        province: '', // 城市
        city: '', // 地区
        keyword: '' // 关键字
      }
      this.$emit('clear')
    },
    // 搜索
    search () {
      this.$emit('search', this.formData)
    }
  },
  computed: {
    citys () {
      return citys(this.formData.provinces) || []
    }
  }
}
</script>
